<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    width="650px">
    <el-form
      :model="form"
      :rules="rule"
      ref="form"
      style="width: 560px"
      label-width="100px"
    >
      <el-form-item label="标题：" prop="title">
        <el-input placeholder="请输入内容" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input placeholder="请输入描述" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="金额：" prop="price">
        <el-input v-model="form.price">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量：" prop="num">
        <el-input placeholder="请输入数量" v-model.number="form.num" type="number"></el-input>
      </el-form-item>
      <el-form-item label="属性：" prop="attribute">
        <el-radio-group v-model="form.attr">
          <el-radio label="daily">每日任务</el-radio>
          <el-radio label="new">新手任务</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" style="display: flex;justify-content: center;">
      <el-button type="primary"
                 @click="cancel">取消
      </el-button>
      <el-button type="primary"
                 @click="submit">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { edit, store, fetchView } from '../api'

export default {
  name: 'banner-edit',
  data () {
    function priceValidator (rule, value, callback) {
      if (parseFloat((value * 100).toPrecision(12)).toString().includes('.')) {
        callback(new Error('金额精确到分，即小数点后两位'))
      }
      callback()
    }
    return {
      dialogVisible: false,
      id: undefined,
      form: {
        title: '',
        description: '',
        price: '',
        type: 'wechat',
        num: '',
        attr: 'daily',
        status: 0
      },
      options: [
        // {
        //   label: '观看广告',
        //   value: 'ad'
        // }, {
        {
          label: '转发微信',
          value: 'wechat'
        }, {
          label: '完成任务',
          value: 'complete'
        }, {
          label: '发布任务',
          value: 'publish'
        }, {
          label: '邀请好友',
          value: 'invite'
        }
      ],
      rule: {
        title: [
          { required: true, message: '请输入标题' }
        ],
        price: [
          { required: true, message: '请输入价格' },
          { validator: priceValidator }
        ],
        num: [
          { required: true, message: '必填' }
        ]
      }
    }
  },
  computed: {
    title () {
      return this.id ? '任务详情' : '新增任务'
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    async open (row = false) {
      this.dialogVisible = true
      if (row === false) {
        this.form = {
          title: '',
          description: '',
          price: '',
          type: 'wechat',
          num: '',
          attr: 'daily',
          status: 0
        }
        this.id = undefined
      } else {
        const { id } = row
        this.id = id
        const { data: { price, ...r } } = await fetchView({ id })
        Object.assign(this.form, { price: price / 100, ...r })
      }
      return new Promise((resolve) => {
        this._resolve = resolve
      })
    },
    cancel () {
      this.close()
    },
    close () {
      this._resolve({ refresh: true })
      this.dialogVisible = false
    },
    async submit () {
      await this.$refs.form.validate()
      const { price, ...r } = this.form
      if (this.id) {
        await edit(this.id, { price: price * 100, ...r })
      } else {
        await store({ price: price * 100, ...r })
      }
      this.$message.success('更新成功')
      this.close()
    }
  }
}
</script>

<style scoped>

</style>
